<template>
	<view class="">
		<view class="batch-num" :class="isShow ? 'on' : ''">
			<view class="batch-body">
				<view class="share-main-btn">
					<view class="share-box-title">分享到：</view>
					<view class="flex-sb-cent">
						<view class="item-btn" @click="onShare('WXSceneSession')">
							<view class="item-btn-img">
								<image src="@/static/images/xs-share01.png" mode=""></image>
							</view>
							<text>微信好友</text>
						</view>
						<view class="item-btn" @click="onShare('WXSceneTimeline')">
							<view class="item-btn-img">
								<image src="@/static/images/xs-share02.png" mode=""></image>
							</view>
							<text>朋友圈</text>
						</view>
					</view>
				</view>
				<view class="cancle-btn" @click="onCancel">取消</view>
			</view>
		</view>
		<view class="mask" v-show="isShow" @click="onCancel"></view>
	</view>
</template>

<script>
	import {share} from '@/api/common.js'
	import { cancel } from '../api/user'
	export default {
		name: "sharePosters",
		props: {
			isOpen: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				isShow: false,
				config: {
					"appId": "",
					"url": "",
					"name": "",
					"logo": "",
					"describe": "",
					config: {},
					"user": {
						"name": "",
						"avatar": ""
					}
				}
			}
		},
		watch: {
			isOpen(newv, oldV) {
				this.isShow = true
			}
		},
		created() {
			this.config = JSON.parse(this.$cache.get('share-config'))
			share().then(data => {
				this.$cache.set('share-config', data, 86400)
				this.config = data
			})
			
		},
		methods: {
			onShare(scene) {
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					type: 0,
					scene,
					title: this.config.name,
					imageUrl: this.config.logo,
					href: this.config.url,
					summary: this.config.describe,
					success: res=> {
						console.log(res)
						this.onCancel()
					},
					fail: res=> {
						if(res.code == -8) {
							this.$showToast('您未安装微信','fail')
						}
						this.onCancel()
					},
				})
				// #endif
				// #ifdef H5
				jWeixin.config(this.config.config)
				let that = this
				jWeixin.ready(()=> { 
					let shareData = {
						title: this.config.name,
						imgUrl: this.config.logo,
						link: this.config.url,
						desc: this.config.describe,
						success: function(res) {
							that.$showToast('分享成功')
						},
						cancel: function(res) {
							that.$showToast(JSON.stringify(err),'fail')
						}
					}
					if (scene=='WXSceneSession') {
						// 分享给微信好友
						jWeixin.updateAppMessageShareData(shareData)
					} else {
						// 分享给微信朋友圈
						jWeixin.updateTimelineShareData(shareData)
					}
				})
				jWeixin.error((res)=>{
					this.$showToast(JSON.stringify(res),'fail')
				})
				// #endif
				
				
			},
			onCancel() {
				this.isShow = false
			},
		}
	}
</script>

<style lang="less" scoped>
	.batch-num {
		width: 100%;
		// height: 624rpx;
		// background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		overflow: hidden;

		&.on {
			transform: translate3d(0, 0, 0);
		}

		.batch-body {
			padding: 20rpx;
		}

		.item-btn {
			width: 50%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 26rpx;
			text-align: center;

			.item-btn-img {
				width: 72rpx;
				height: 72rpx;
				margin: 0 auto;
				margin-bottom: 12rpx;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				image,
				img {
					width: 72rpx;
					height: 72rpx;
					pointer-events: none;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
			}
		}

		.share-main-btn {
			width: 100%;
			height: 248rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 12rpx;
			padding: 32rpx 48rpx;
			margin-top: 40rpx;

			.share-box-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 32rpx;
				padding-bottom: 30rpx;
			}
		}

		.cancle-btn {
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2E73FF;
		}
	}

	// 分享
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.7;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999 !important;
	}
</style>